<template>
    <fieldset>
        <legend>二级联动</legend>
        <select v-model="aaa" @change="ccc()">
            <option v-for="item in arr" :key="item.id" :value="item.id" >{{item.name}}</option>
        </select>
        <select v-model="bbb" @change="ddd()">
            <option v-for="item in arr2" :key="item.id" :value="item.id">{{item.name}}</option>
        </select>
        <select v-model="eee">
            <option v-for="item in arr3" :key="item.id" :value="item.id">{{item.name}}</option>
        </select>
    </fieldset>




</template>
<script>
    import * as api from '../../api/select.js'
    export default{
        data () {
            return {
                arr:[],
                arr2:[],
                aaa:1,
                bbb:'',
                arr3:[],
                eee:''
            }
        },
        methods:{
            async ccc(){
                await api.fetchCity(this.aaa)
            .then(res=>{
                this.arr2=res
                // console.log(this.arr2);
                this.bbb=this.arr2[0].id
                
                })
                this.ddd()
            },
            ddd(){
                api.countyCity(this.bbb)
                .then(res=>{
                    // console.log(res);
                    this.arr3=res
                    // console.log(arr3);
                    this.eee=this.arr3[0].id

                })
            }
        },
        mounted(){
            api.fetchData()
            .then(res=>{
                console.log(res);
            this.arr=res
            this.ccc()
            
            })
        }
    }


</script>
<style>
    select{
        width: 100px;
    }



</style>